# HTML Lists

« Previous
Next Chapter »

## HTML can have Unordered Lists, Ordered Lists, or Description Lists:

### Unordered HTML List

- The first item
- The second item
- The third item
- The fourth item

### Ordered HTML List

1. The first item
2. The second item
3. The third item
4. The fourth item

### HTML Description List

The first item
  Description of item
The second item
  Description of item

## Unordered HTML Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles).

## Unordered List:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

## Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style | Description
--- | ---
list-style-type:disc | The list items will be marked with bullets (default)
list-style-type:circle | The list items will be marked with circles
list-style-type:square | The list items will be marked with squares
list-style-type:none | The list items will not be marked

## Disc:

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

## Circle:

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

## Square:

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

## None:

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

| Using a type attribute <ul type="disc">, instead of <ul style="list-style-type:disc">, also works. But in HTML5, the type attribute is not valid in unordered lists, only in ordered list.

## Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers.

## Ordered List:

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Try it Yourself »

## Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

Type | Description
--- | ---
type="1" | The list items will be numbered with numbers (default)
type="A" | The list items will be numbered with uppercase letters
type="a" | The list items will be numbered with lowercase letters
type="I" | The list items will be numbered with uppercase roman numbers
type="i" | The list items will be numbered with lowercase roman numbers

## Numbers:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

## Upper Case:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

## Lower Case:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

## Roman Upper Case:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

## Roman Lower Case:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

## HTML Description Lists

A description list, is a list of terms, with a description of each term.

The <dl> tag defines a description list.

The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

## Description List:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »

## Nested HTML Lists

List can be nested (lists inside lists).

## Nested Lists:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »

| List items can contain new list, and other HTML elements, like images and links, etc.

## Horizontal Lists

HTML lists can be styled in many different ways with CSS.

One popular way, is to style a list to display horizontally:

## Horizontal List:

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Try it Yourself »

With a little extra style, you can make it look like a menu:

- Tables
- Lists
- Blocks
- Classes

## New Style:

ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
Try it Yourself »

## Chapter Summary

- Use the HTML <ul> element to define an unordered list
- Use the HTML style attribute to define the bullet style
- Use the HTML <ol> element to define an ordered list
- Use the HTML type attribute to define the numbering type
- Use the HTML <li> element to define a list item
- Use the HTML <dl> element to define a description list
- Use the HTML <dt> element to define the description term
- Use the HTML <dd> element to define the description data
- Lists can be nested inside lists
- List items can contain other HTML elements
- Use the CSS property display:inline to display a list horizontally

## Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »

## HTML List Tags

Tag | Description
--- | ---
<ul> | Defines an unordered list
<ol> | Defines an ordered list
<li> | Defines a list item
<dl> | Defines a description list
<dt> | Defines the term in a description list
<dd> | Defines the description in a description list

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples